<template>
  <view class="cart">
    <!-- 1 购物车列表 -->
    <view class="cart-list">
      <u-swipe-action
        btn-width="180"
        v-for="(item,index) in cartList"
        :key="item.goods_id"
        :options="options"
        @click="click(index)"
        @open="open(index)"
      >
        <view class="cart-item">
          <!-- 复选框 -->
          <view class="chk">
            <u-checkbox
              :value="item.checked"
              active-color="red"
              size="50"
              shape="circle"
              @change="handleItemCheck(index)"
            ></u-checkbox>
          </view>
          <!-- 图片 -->
          <view class="cart-img">
            <u-image width="190rpx" height="190rpx" :src="item.goods_small_logo"></u-image>
          </view>
          <!-- 商品信息 -->
          <view class="cart-info">
            <view class="goods-name u-line-2">{{item.goods_name}}</view>
            <view class="goods-tool">
              <view class="goods-price">￥{{item.goods_price}}</view>
              <view class="goods-num-change">
                <view class="num-btn" @click="handleNumChange(index,-1)">-</view>
                <view class="num-value">{{item.num}}</view>
                <view class="num-btn" @click="handleNumChange(index,1)">+</view>
              </view>
            </view>
          </view>
        </view>
      </u-swipe-action>
    </view>

    <!-- 2 统计栏结构 -->
    <view class="statistics">
      <!-- 全选 -->
      <view class="all-chk">
        <u-checkbox
          :value="isAllChecked"
          @change="handleAllCheck"
          active-color="red"
          size="50"
          shape="circle"
        >全选</u-checkbox>
      </view>
      <!-- 合计 -->
      <view class="total">
        合计：
        <text class="rmb">￥</text>
        <text class="total-price">{{totalPrice}}</text>
      </view>
      <!-- 结算 -->
      <u-button
        type="error"
        @click="handleGoPay"
        :custom-style="{fontSize:'26rpx',width:'220rpx',height:'52rpx',borderRadius:'26rpx'}"
      >去结算（{{totalCount}}）</u-button>
    </view>
  </view>
</template>

<script>
// import { mapState } from "vuex";
import { mapState, mapGetters } from "vuex";
export default {
  data() {
    return {
      options: [
        {
          text: "删除",
          style: {
            backgroundColor: "#dd524d"
          }
        }
      ]
    };
  },
  computed: {
    ...mapState(["cartList"]),
    ...mapGetters([
      "checkedCartList",
      "totalPrice",
      "totalCount",
      "isAllChecked"
    ])
  },
  methods: {
    // 点击复选框功能
    handleItemCheck(index) {
      // console.log(index);
      /* 
     1 获取到想要修改的元素的索引
     2 获取购物车数组
     3 数组[索引].checked=!数组[索引].checked;
     4 把数组 设置回mutations中即可
      */
      const cartList = [...this.cartList];
      cartList[index].checked = !cartList[index].checked;
      this.$store.commit("setCartList", cartList);
    },
    // 点击全选功能
    handleAllCheck() {
      /* 
     1 获取到想要修改的元素的索引
     2 获取购物车数组
     3 数组[索引].checked=!数组[索引].checked;
     4 把数组 设置回mutations中即可
      */
      const isAllChecked = !this.isAllChecked;
      const cartList = [...this.cartList];
      cartList.forEach(goods => (goods.checked = isAllChecked));
      this.$store.commit("setCartList", cartList);
    },
    // 商品数量的编辑功能
    async handleNumChange(index, unit) {
      /* 
     1 获取到想要修改的元素的索引
     2 获取购物车数组
     3 数组[索引].num+=unit;
     4 把数组 设置回mutations中即可
     5 判断是商品数量是否等于1，当小于1的时候弹出提示框询问用户是否需要删除
     点击确定执行删除，点击取消什么都不做
      */
      const cartList = [...this.cartList];
      if (cartList[index].num === 1 && unit === -1) {
        // 弹出一个确认框 询问用户是否要删除
        // console.log("弹出一个确认框 询问用户是否要删除");
        // 修改了数据的返回值  数组
        const [err, result] = await uni.showModal({
          title: "温馨提示",
          content: "您舍得删除吗😶"
        });
        if (result.confirm) {
          // 删除
          cartList.splice(index, 1);
          this.$store.commit("setCartList", cartList);
        }
      } else {
        cartList[index].num += unit;
        this.$store.commit("setCartList", cartList);
      }
    },
    async click(index) {
      console.log(index);
      const cartList = [...this.cartList];
      const [err, result] = await uni.showModal({
        title: "温馨提示",
        content: "您舍得删除吗😶"
      });
      if (result.confirm) {
        // 删除
        cartList.splice(index, 1);
        this.$store.commit("setCartList", cartList);
      }
    },
    open(index) {
      // 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
      // 原本为'false'，再次设置为'false'会无效
      const cartList = [...this.cartList];
      console.log(cartList[index].show);
      cartList[index].show = true;
      cartList.map((val, idx) => {
        if (index != idx) this.cartList[idx].show = false;
      });
    },
    // 点击去结算
    handleGoPay() {
      /* 
      1 判断用户有没有选购过商品
      2 没有  弹窗 提示用户
      3 有 跳转页面 
       */
      if (this.totalCount > 0) {
        // 选购过
        console.log("跳转到支付页面");
        uni.navigateTo({ url: "/pages/pay/pay" });
      } else {
        // 没有选购商品
        uni.showToast({
          title: "您还没有选购商品哦~",
          icon: "none"
        });
      }
    }
  }
};
</script>
<style lang="scss">
.cart {
  padding-bottom: 83rpx;
  .cart-list {
    .cart-item {
      padding: 20rpx;
      display: flex;
      .chk {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        // checkbox .wx-checkbox-input {
        //   width: 60rpx;
        //   height: 60rpx;
        //   border-radius: 50%;
        // }
        // checkbox .wx-checkbox-input.wx-checkbox-input-checked {
        //   width: 55rpx;
        //   height: 55rpx;
        //   border-radius: 50%;
        //   background-color: $backColor;
        //   color: #ffffff;
        // }
      }
      .cart-img {
        flex: 2;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .cart-info {
        flex: 3;
        margin-left: 10rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .goods-tool {
          display: flex;
          justify-content: space-between;
          .goods-price {
            color: $backColor;
          }
          .goods-num-change {
            display: flex;
            color: #666;
            .num-btn {
              width: 36rpx;
              height: 36rpx;
              border: 1rpx solid #666;
              border-radius: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
            }
            .num-value {
              margin: 0 20rpx;
            }
          }
        }
      }
    }
  }
}
.statistics {
  height: 83rpx;
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  border-top: 1rpx solid #ccc;
  display: flex;
  padding: 0 10rpx;
  align-items: center;
  background-color: #fff;

  .all-chk {
    padding: 0 10rpx;
    // checkbox .wx-checkbox-input {
    //   width: 60rpx;
    //   height: 60rpx;
    //   border-radius: 50%;
    // }
    // checkbox .wx-checkbox-input.wx-checkbox-input-checked {
    //   width: 55rpx;
    //   height: 55rpx;
    //   border-radius: 50%;
    //   background-color: $backColor;
    //   color: #ffffff;
    // }
  }

  .total {
    flex: 1;
    .rmb {
      color: $backColor;
      font-size: 20rpx;
    }

    .total-price {
      color: $backColor;
    }
  }
}
</style>